<template>
    <div>
        <use-page-header/>
        <div class="wrapper">
            <a-card>
                <a-flex class="margin-bottom" justify="space-between">
                    <a-button type="primary" @click="showModal"><PlusOutlined/>添加模板</a-button>
                    <div><a-input-search placeholder="输入关键字搜索" name="keywords" @search="onSearch" allow-clear/></div>
                </a-flex>
               <a-list :pagination="tablePagination" :data-source="data" :loading="state.loading">
                    <template #renderItem="{item}"> 
                        <a-list-item>
                            <a-list-item-meta :title="item.name">
                                <template #avatar>
                                    <a-avatar :src="avatar" shape="square" :size="64"/>
                                </template>
                                <template #description v-if="item.full_fields.length > 0"> 
                                    <a-tag v-for="field in item.full_fields">
                                        {{ field.name }}
                                    </a-tag>
                                </template>
                            </a-list-item-meta>
                            <div class="margin-left" :style="{width:'130px'}"> 
                                <span class="a-text-secondary">创建时间</span>
                                <div class="padding-top-sm">{{ item.create_time || '未定义' }}</div>
                            </div>
                            <div class="margin-left" :style="{width:'80px'}"> 
                                <span class="a-text-secondary">状态</span>
                                <div class="padding-top-sm">
                                    <a-tag v-if="item.status" color="green">正常</a-tag>
                                    <a-tag v-else>禁用</a-tag>
                                </div>
                            </div>
                            <template #actions>
                                <span class="action" @click="showModal(item)">编辑</span>
                                <span class="action" @click="changeStatus(item.id,item.status)">
                                    {{ item.status ? '禁用' : '启用' }}
                                </span>
                                <span class="action" @click="onDelete(item.id)">删除</span>
                            </template>
                        </a-list-item>
                    </template>
               </a-list>
            </a-card>
        </div>
        <!-- modal弹窗组件 -->
        <templates-modal v-model:open="state.open" @ok="getData" :data-item="dataItem"/>
    </div>
</template>
<script lang="ts" setup>
import { UsePageHeader } from '@/components';
import { tablePagination } from '@/config';
import { PlusOutlined } from '@ant-design/icons-vue';
import { ref, reactive, onMounted } from 'vue';
import TemplatesModal from './TemplatesModal.vue';
import { deleteTemplate, getTemplateList, updateTemplate } from '@/server/modules/templates';
import avatar from '@/assets/template_avatar.svg'
import { hasPermission } from '@/hooks';
import { Modal } from 'ant-design-vue';
import useMessage from '@/hooks/useMessage';

//定义渲染数据 用于渲染
const data = ref<TemplateType[]>([])
//定义数据源 存储用与筛选
const dataSource = ref<TemplateType[]>([])
//定义数据项
const dataItem = ref<TemplateType>()
//定义状态
const state = reactive({
    open: false,
    loading:false
})
//唤起modal框
const showModal = (item?: TemplateType) => {
    state.open = true
    dataItem.value = item
}
const getData = async () => { 
    try{
        state.loading = true
        const res = await getTemplateList()
        if(res.code === 200 && res.data){
            data.value = res.data
            dataSource.value = res.data
        }
    }finally{
        setTimeout(() => {
            state.loading= false
        }, 500);
    }
}
onMounted(() => { 
    getData()
})
const onDelete = async (id:number)=>{
    if(!hasPermission('delete')) return
    Modal.confirm({
        title:'提示',
        content:'确定要删除吗？',
        onOk:async()=>{
            const res = await deleteTemplate(id)
            if(res.code === 200){
                getData()
            }
            useMessage(res.code,res.message)
        }
    })
}
const changeStatus = async (id:number,status:number)=>{ 
    if(!hasPermission('update')) return
    const res = await updateTemplate({id,status:status ? 0 : 1})
    if(res.code === 200){
        getData()
    }
    useMessage(res.code,res.message)
}
const onSearch = (value:string)=>{ 
    try{
        state.loading = true
         if(!value) return data.value = dataSource.value
         data.value = dataSource.value.filter(item=>item.name.includes(value))
    }catch(err){
        console.log(err);
    }finally{
        setTimeout(() => {
            state.loading= false
        }, 300);
    }
}
</script>

<style scoped>

</style>`